import axios from "axios"

export default function App() {
  // 作用: 将对当前项目的所有404的请求转发给指定的跨域的后台接口
  const handleClick = async () => {
    /* 
    浏览器发请求: http://localhost:3000/search/users?q=aa   浏览器发一个没有跨域的请求
    目标地址: http://localhost:4000/search/users?q=aa  但最终被请求并返回数据是它
    现在需要一个人来帮忙转发一个请求, 转发到跨域的目标地址   代理服务器
      代理服务器帮助我们的开发服务器(devServer), 转发请求
      如何告诉代理服务器, 要转发的目标地址?  ==> 写配置
    */
   // 要求: 要想让代理服务器起作用, 必须请求当前前台项目的虚拟基础地址
    // const response = await axios('http://localhost:3000/search/users?q=aa') // 有可能运行在其它端口
    const response = await axios('/search/users?q=aa') // 不写基础地址, 直接写后面的path部分
    // 不写基础路径, 自动添加上当前项目的基础路径
    console.log(response.data)
  }

  return (
    <div>
      <button onClick={handleClick}>发跨域ajax请求</button>
    </div>
  )
}

